<template>
  <div>
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="80px">
      <el-form-item label="姓名" prop="username">
        <el-input v-model="formData.username" />
      </el-form-item>
      <el-form-item label="手机" prop="mobile">
        <el-input v-model="formData.mobile" />
      </el-form-item>
      <el-form-item label="入职时间" prop="timeOfEntry">
        <el-date-picker
          v-model="formData.timeOfEntry"
          type="date"
          placeholder="选择日期"
          style="width: 100%;"
          format="yyyy年MM月dd日"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-form-item label="聘用形式" prop="formOfEmployment">
        <el-select v-model="formData.formOfEmployment" placeholder="请选择聘用形式">
          <el-option v-for="item in empolyeeType.hireType" :key="item.id" :label="item.value" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="工号" prop="workNumber">
        <el-input v-model="formData.workNumber" />
      </el-form-item>
      <el-form-item label="部门" prop="departmentName">
        <el-input v-model="formData.departmentName" readonly="" @focus="isShowTree = true" />
        <!-- 树结构控组件 -->
        <el-tree v-if="isShowTree" :data="dataTree" :props="defaultProps" @node-click="handleNodeClick" />
      </el-form-item>
      <el-form-item label="转正时间" prop="correctionTime">
        <el-date-picker
          v-model="formData.correctionTime"
          type="date"
          placeholder="选择日期"
          style="width: 100%;"
          format="yyyy年MM月dd日"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-form-item class="bottomBtn">
        <el-button @click="$emit('close')">取消</el-button>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { valideMobile } from '@/utils/validate'
import { addUserListRequest } from '@/api/employees'
import empolyeeType from '@/constant/employees'
import { getDepartmentInfoRequest } from '@/api/department'
import { transformListToTree2 } from '@/utils'
export default {
  data() {
    // 自定义校验规则
    // 有三个参数, 第一个参数为 校验规则, 第二个参数是校验的数据
    // 第三个参数是函数, 必须被调用否则校验不会执行
    const valiMobile = (rules, valid, callback) => {
      if (!valideMobile(valid)) return callback(new Error('请输入正确格式的手机号'))
      callback()
    }
    return {
      // 初始化表单数据
      formData: {
        username: '', // 姓名
        mobile: '', // 手机
        timeOfEntry: '', // 入职时间
        formOfEmployment: '', // 聘用形式
        workNumber: '', // 工号
        departmentName: '', // 部门
        correctionTime: '' // 转正时间
      },
      // 引入转换用的数据, 要在 data 中初始化, 否则无法实现响应式的效果
      empolyeeType: empolyeeType,
      // 树形结构数据初始化
      dataTree: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      // 控制树形结构组件显示隐藏
      isShowTree: false,
      // 定义表单校验规则
      rules: {
        username: [ // 姓名
          { required: true, message: '请输入姓名后再提交', trigger: 'blur' },
          { min: 2, max: 4, message: '请输入 2 ~ 4 个字的姓名', trigger: 'blur' }
        ],
        mobile: [ // 手机
          { required: true, message: '请输入手机后再提交', trigger: 'change' },
          { validator: valiMobile, trigger: 'blur' }
        ],
        timeOfEntry: [ // 入职时间
          { required: true, message: '请输入入职时间后再提交', trigger: 'change' }
        ],
        formOfEmployment: [ // 聘用形式
          { required: true, message: '请输入聘用形式后再提交', trigger: 'blur' }
        ],
        workNumber: [ // 工号
          { required: true, message: '请输入工号后再提交', trigger: 'blur' }
        ],
        departmentName: [ // 部门
          { required: true, message: '请输入部门后再提交', trigger: 'change' }
        ],
        correctionTime: [ // 转正时间
          { required: true, message: '请输入转正时间后再提交', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this.getDepartmentInfo() // 获取部门列表
  },
  methods: {
    // ^ ==================== 定义函数发送请求 ====================
    // 请求 - 获取部门列表
    async getDepartmentInfo() {
      try {
        const res = await getDepartmentInfoRequest()
        if (res.success) {
          // 递归实现平面结构转树形结构
          console.log(res.data.depts)
          this.dataTree = transformListToTree2(res.data.depts, '') // 传递两个参数, 平面数据与初始一级菜单pid ''
          console.log(this.dataTree)
        } else {
          console.log('获取部门列表失败')
        }
      } catch (error) {
        console.log('获取部门列表失败', error)
      }
    },
    // 请求 - 添加员工
    async addUserList() {
      try {
        const res = await addUserListRequest(this.formData)
        if (res.success) {
          this.$message.success('添加员工成功!')
          this.$emit('success') // 添加成功, 向父组件抛出 success 事件
          return
        }
        this.$message.error('添加员工失败!')
      } catch (error) {
        console.log('添加员工失败', error)
      }
    },
    // ^ ==================== 定义事件处理函数 ====================
    // 事件 - 提交按钮点击事件
    onSubmit() { // 兜底校验
      this.$refs.formRef.validate(val => {
        if (!val) return
        this.addUserList()
      })
    },
    // 事件 - 表单重置
    resetClean() {
      this.formData = this.$options.data.call(this).formData // 表单重置
      this.$refs.formRef.resetFields() // 重置校验结果
    },
    // 事件 - 树形结构菜单点击事件
    handleNodeClick(value) {
      // 第一个参数可以获取到当前项的数据
      // 如果当前项的children > 0 代表当前项有子菜单, 也就是当前项是一级菜单, 那么就终止函数, 因为这里一级菜单不能被选中
      if (value.children.length > 0) return
      this.formData.departmentName = value.name // 将部门名赋值给 部门输入框
      this.isShowTree = false // 隐藏树形组件
    }
  }
}
</script>

<style lang="scss">
</style>
